<template>
  <el-dialog
    :model-value="detailDialogVisible"
    :title="dialogTitle"
    width="500"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="form.name" disabled />
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker
          v-model="form.startDate"
          type="datetime"
          placeholder="开始时间"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x"
          disabled
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker
          v-model="form.endDate"
          type="datetime"
          placeholder="结束时间"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="x"
          :default-time="defaultTime1"
          disabled
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, watch } from "vue";
const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  dialogTitle: {
    type: String,
    default: "",
  },
  rowvalue: {
    type: Object,
    default: () => {},
  },
});
const form = ref({
  name: "",
  startDate: "",
  endDate: "",
});

const handleClose = () => {
  emits("update:modelValue", false);
};

watch(
  () => props.rowvalue,
  () => {
    form.value = props.rowvalue;
  },
  { deep: true, immediate: true }
);
</script>
